<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>olympics</title>
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="swiper\swiper-bundle.min.css" />
    <link rel="stylesheet" href="CSS/index.css">
    <link rel="icon" href="images/Xwuhuan.png" type="image/x-icon">
</head>
<body>
    <div class="top">
        <img src="images/wuhuan.jpg" alt="Olympic Rings">
        <ul class="Topnavbar">
            <li><a href="Future.html">奥运会</a></li>
            <li><a href="Sports.html">体育新闻</a></li>
            <li><a href="index.html">运动员</a></li>
            <li><a href="Originality.html">创意周边</a></li>
            <li><a href="Message.html">在线留言</a></li>
            <li><a href="Picture.html">精彩瞬间</a></li>
        </ul>
    </div>

    <div class="main">
        <h1 class="title">运动员</h1>
        <div class="search">
            <input type="text" placeholder="搜索运动员" name="athleteSearch">
            <button type="submit">
                <img src="images/sou.jpg" alt="Search">
            </button>
        </div>
    </div>

    <div class="bottom">

        <div class="item">
            <a href="#">
                <img src="images/MaLong.jpg" alt="Athlete 3">
                <div class="name">
                    <h3>马龙</h3>
                    <p>CHN, 乒乓球</p>
                </div>
            </a>
        </div>


        <div class="item">
            <a href="#">
                <img src="images/CYF.jpg" alt="Athlete 2">
                <div class="name">
                    <h3>陈雨菲</h3>
                    <p>CHN, 羽毛球</p>
                </div>
            </a>
        </div>

        <div class="item">
            <a href="#">
                <img src="images/QHC.jpg" alt="Athlete 4">
                <div class="name">
                    <h3>全红蝉</h3>
                    <p>CHN, 跳水</p>
                </div>
            </a>
        </div>

        <div class="item">
            <a href="#">
                <img src="images/GAL.jpg" alt="Athlete 5">
                <div class="name">
                    <h3>谷爱凌</h3>
                    <p>CHN,自由式滑雪</p>
                </div>
            </a>
        </div>

        <div class="item">
            <a href="#">
                <img src="images/SYS.jpg" alt="Athlete 6">
                <div class="name">
                    <h3>孙颖莎</h3>
                    <p>CHN, 乒乓球</p>
                </div>
            </a>
        </div>

        <div class="item">
            <a href="#">
                <img src="images/suym.jpg" alt="Athlete 7">
                <div class="name">
                    <h3>苏翊鸣</h3>
                    <p>CHN, 单板滑雪</p>
                </div>
            </a>
        </div>

        <div class="item">
            <a href="#">
                <img src="images/ZQW.jpg" alt="Athlete 8">
                <div class="name">
                    <h3>郑钦文</h3>
                    <p>CHN, 网球</p>
                </div>
            </a>
        </div>

        <div class="item">
            <a href="#">
                <img src="images/SYQ.jpg" alt="Athlete 1">
                <div class="name">
                    <h3>石宇奇</h3>
                    <p>CHN, 羽毛球</p>
                </div>
            </a>
        </div>

        <div class="item">
            <a href="#">
                <img src="images/WCQ.jpg" alt="Athlete 9">
                <div class="name">
                    <h3>王楚钦</h3>
                    <p>CHN, 乒乓球</p>
                </div>
            </a>
        </div>

        <div class="item">
            <a href="#">
                <img src="images/LXJ.jpg" alt="Athlete 10">
                <div class="name">
                    <h3>林孝俊</h3>
                    <p>CHN, 短道速滑</p>
                </div>
            </a>
        </div>

        <div class="item">
            <a href="#">
                <img src="images/zyf.jpg" alt="Athlete 11">
                <div class="name">
                    <h3>张雨霏</h3>
                    <p>CHN, 游泳</p>
                </div>
            </a>
        </div>

        <div class="item">
            <a href="#">
                <img src="images/FZD.jpg" alt="Athlete 12">
                <div class="name">
                    <h3>樊振东</h3>
                    <p>CHN, 乒乓球</p>
                </div>
            </a>
        </div>

        <div class="item">
            <a href="#">
                <img src="images/CYX.jpg" alt="Athlete 13">
                <div class="name">
                    <h3>陈芋汐</h3>
                    <p>CHN, 跳水</p>
                </div>
            </a>
        </div>

        <div class="item">
            <a href="#">
                <img src="images/sbt.jpg" alt="Athlete 14">
                <div class="name">
                    <h3>苏炳添</h3>
                    <p>CHN, 田径</p>
                </div>
            </a>
        </div>

        <div class="item">
            <a href="#">
                <img src="images/LYY.jpg" alt="Athlete 15">
                <div class="name">
                    <h3>李盈莹</h3>
                    <p>CHN, 排球</p>
                </div>
            </a>
        </div>

        <div class="item">
            <a href="#">
                <img src="images/ZT.jpg" alt="Athlete 16">
                <div class="name">
                    <h3>朱婷</h3>
                    <p>CHN, 排球</p>
                </div>
            </a>
        </div>

        <div class="item">
            <a href="#">
                <img src="images/pzl.jpg" alt="Athlete 17">
                <div class="name">
                    <h3>潘展乐</h3>
                    <p>CHN, 游泳</p>
                </div>
            </a>
        </div>

        <div class="item">
            <a href="#">
                <img src="images/LWW.jpg" alt="Athlete 18">
                <div class="name">
                    <h3>李雯雯</h3>
                    <p>CHN, 举重</p>
                </div>
            </a>
        </div>

    </div>

    <div class="line">奥运会</div>

    <div class="pic">
        <!-- Swiper -->
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="images/2024logo.jpg" alt="">
                    <a href="https://olympics.com/en/olympic-games/gangwon-2024"><p>2024年江原道冬青奥会</p></a>
                </div>
                <div class="swiper-slide">
                    <img src="images/BL2024logo.jpg" alt="">
                    <a href="https://olympics.com/en/paris-2024"><p>2024年巴黎奥运会</p></a>
                </div>
                <div class="swiper-slide">
                    <img src="images/2026logo.jpg" alt="">
                    <a href="https://milanocortina2026.olympics.com/it"><p>2026年米兰科尔蒂纳冬奥会</p></a>
                </div>
                <div class="swiper-slide">
                    <img src="images/2028logo.jpg" alt="">
                    <a href="Sports.html"><p>2028年洛杉矶奥运会</p></a>
                </div>
                <div class="swiper-slide">
                    <img src="images/2030logo.jpg" alt="">
                    <a href="Sports.html"><p>法国阿尔卑斯2030</p></a>
                </div>
                <div class="swiper-slide">
                    <img src="images/2032logo.jpg" alt="">
                    <a href="Sports.html"><p>2032年布里斯班奥运会</p></a>
                </div>
                <div class="swiper-slide">
                    <img src="images/2034logo.jpg" alt="">
                    <a href="Sports.html"><p>盐湖城 - 犹他2034</p></a>
                </div>
            
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>

        </div>

        <!-- Swiper JS -->
        <script src="swiper/swiper-bundle.min.js"></script>

        <!-- Initialize Swiper -->
        <script>
            var swiper = new Swiper(".mySwiper", {
                cssMode: true,
                slidesPerView:4,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },

                mousewheel: true,
                keyboard: true,
                navigationColor: 'var(--swiper-navigation-color)', 
            });

        </script>

    </div>


    <div class="under">

        <div class="Bottonnavbar">
            
            <div class="logo">
              <img src="images/wuhuan-2.jpg" alt="Olympic Logo">
            </div>
          
            <div class="section">
              <a href="index.html" class="first-row">奥运会</a>
              <a href="#" class="rows">巴黎2024</a>
              <a href="#" class="rows">结果和奖牌</a>
              <a href="#" class="rows">回看和集锦</a>
              <a href="#" class="rows">全部奥运会</a>
            </div>

            <div class="section">
              <a href="https://olympics.com/zh/olympic-channel" class="first-row">Olympic Channel</a>
              <a href="#" class="rows">电视频道</a>
              <a href="#" class="rows">直播赛事</a>
              <a href="#" class="rows">原创系列</a>
              <a href="#" class="rows">企业</a>
            </div>

            <div class="section">
              <a href="https://olympics.com/zh/news" class="first-row">新闻</a>
              <a href="#" class="rows">博客</a>
              <a href="#" class="rows">话题</a>
            </div>
            <div class="section">
              <a href="#" class="first-row">探索</a>
              <a href="#" class="rows">运动员</a>
              <a href="#" class="rows">运动项目</a>
            </div>
        </div>
          
        <div class="footer">
            <a href="#">国际奥委会</a>
            <a href="#">博物馆</a>
            <a href="#">商店</a>
            <a href="#">关于我们</a>
            <a href="#">联络中心</a>
            <a href="#">站点地图</a>
            <a href="#">生涯</a>
        </div>
          
        <div class="end">
            <p class="copyright">本次设计参照奥林匹克运动员网站制作@https://olympics.com/zh/athletes</p>
        </div>

    </div>

</body>
</html>